<template>
  <div class="card smart-entry">
    <div
      class="left"
      :style="`min-width: ${showNodes ? '186px' : '0'}; max-width: ${showNodes ? '230px' : '0'}; border: ${
        showNodes ? '1px solid #ccc' : 'none'
      }`"
    >
      <div class="tree" :style="`width: ${showNodes ? '100%' : '0%'}`">
        <ztree :setting="treeSetting.setting" :nodes="treeSetting.treeData" @onClick="onClick"></ztree>
        <div
          :class="`handle ${showNodes ? '' : 'hideHandle'}`"
          @click="showNodes = !showNodes"
          :style="`transform: rotate(${showNodes ? '0deg' : '180deg'}); right: ${showNodes ? '0' : '-10px'}`"
          :title="showNodes ? '收起侧边栏' : '打开侧边栏'"
        >
          <i class="iconfont icon-dakaicebianlan"></i>
        </div>
      </div>
    </div>
    <div class="middle">
      <CustomCropper :curNodeImgUrl="curNodeImgUrl" />
    </div>
    <div class="right">
      <el-divider>系统字段</el-divider>
      <div class="form-content">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="ruleForm">
          <div class="line">
            <el-form-item label="责任者：" prop="responsible">
              <el-input v-model="ruleForm.responsible" />
            </el-form-item>
            <el-form-item label="序号：">
              <el-input v-model="ruleForm.seriaNumber" />
            </el-form-item>
          </div>
          <div class="line">
            <el-form-item label="文号：">
              <el-input v-model="ruleForm.docNumber" />
            </el-form-item>
            <el-form-item label="扫描序号：">
              <el-input v-model="ruleForm.scanNumber" />
            </el-form-item>
          </div>
          <div class="line">
            <el-form-item label="题名：" prop="title">
              <el-input v-model="ruleForm.title" type="textarea" :rows="2" />
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
              <el-input v-model="ruleForm.remark" type="textarea" :rows="2" />
            </el-form-item>
          </div>
          <div class="line">
            <el-form-item label="日期：" prop="date">
              <el-input v-model="ruleForm.date" />
            </el-form-item>
            <el-form-item label="保管期限：">
              <el-select v-model="ruleForm.storagePeriod" placeholder="保管期限">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line">
            <el-form-item label="问题/机构：">
              <el-input v-model="ruleForm.issue" />
            </el-form-item>
            <el-form-item label="密级：">
              <el-select v-model="ruleForm.classification" placeholder="密级">
                <el-option label="一级" value="shanghai" />
                <el-option label="二级" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line">
            <el-form-item label="页数：" prop="pageNum">
              <el-input v-model="ruleForm.pageNum" />
            </el-form-item>
            <el-form-item label="年度：" prop="year">
              <el-input v-model="ruleForm.year" />
            </el-form-item>
          </div>
          <div class="line">
            <el-form-item label="标签：">
              <el-input v-model="ruleForm.mark" />
            </el-form-item>
            <el-form-item label="文种：">
              <el-select v-model="ruleForm.lang" placeholder="文种">
                <el-option label="zh" value="shanghai" />
                <el-option label="en" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line">
            <el-form-item label="代字：">
              <el-input v-model="ruleForm.code" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="btns">
        <div class="top">
          <el-button type="primary" :icon="ArrowLeftBold">首页</el-button>
          <el-button type="primary" :icon="ArrowRightBold">末尾页</el-button>
          <div class="jump">
            <el-input v-model="jumpPage" placeholder="跳转页码">
              <template #suffix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>
          </div>
          <el-button type="primary" :icon="Aim">查看上一件</el-button>
        </div>
        <div class="btm">
          <el-button type="primary">完成著录并自动跳到下一件</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { ArrowLeftBold, ArrowRightBold, Aim } from "@element-plus/icons-vue";
import CustomCropper from "./CustomCropper.vue";

const jumpPage = ref(1);
const showNodes = ref(true); // 是否展示左侧文件树
const curNodeImgUrl = ref("");

const ruleForm = ref<any>({
  responsible: "Vincin",
  seriaNumber: "",
  docNumber: "",
  scanNumber: "",
  title: "",
  remark: "",
  date: "",
  storagePeriod: "",
  issue: "",
  classification: "",
  pageNum: 1,
  year: "2025",
  mark: "",
  lang: "",
  code: ""
});
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: false
      }
    },
    view: {
      showIcon: true
    }
  },
  treeData: [] as any[]
});

const rules = reactive({
  responsible: [{ required: true, message: "请输入责任者", trigger: "blur" }],
  title: [{ required: true, message: "请输入题名", trigger: "change" }],
  pageNum: [{ required: true, message: "请输入页数", trigger: "blur" }],
  year: [{ required: true, message: "请输入年度", trigger: "blur" }]
});

// 树节点点击事件
const onClick = (treeNode: any) => {
  console.log(treeNode);
  if (treeNode.isParent) return;
  curNodeImgUrl.value = treeNode.name;
};

// 递归遍历treeSetting.treeData及children 设置iconOpen、iconClose、icon
const setIcon = (data: any) => {
  data.forEach((item: any) => {
    item.iconOpen = new URL("@/assets/imgs/opened_folder.png", import.meta.url).href;
    item.iconClose = new URL("@/assets/imgs/folder.png", import.meta.url).href;
    item.icon = new URL("@/assets/imgs/file.png", import.meta.url).href;
    if (item.children?.length) setIcon(item.children);
  });
};

onMounted(() => {
  // 获取树节点数据
  treeSetting.treeData = [
    {
      id: 1,
      name: "一级目录",
      open: true,
      children: [
        {
          id: 11,
          name: "二级目录",
          open: true,
          children: [
            { id: 111, name: new URL("@/assets/test/1.jpg", import.meta.url).href },
            { id: 112, name: new URL("@/assets/test/2.jpg", import.meta.url).href }
          ]
        },
        {
          id: 12,
          name: "二级目录",
          open: true,
          children: [
            { id: 121, name: new URL("@/assets/test/3.jpg", import.meta.url).href },
            { id: 122, name: new URL("@/assets/test/4.jpg", import.meta.url).href }
          ]
        }
      ]
    },
    {
      id: 2,
      name: "一级目录",
      checked: true,
      open: true,
      children: [
        { id: 21, name: new URL("@/assets/test/5.jpg", import.meta.url).href },
        {
          id: 22,
          name: "二级目录",
          open: true,
          children: [
            { id: 221, name: new URL("@/assets/test/6.jpg", import.meta.url).href },
            { id: 222, name: new URL("@/assets/test/3.jpg", import.meta.url).href }
          ]
        },
        { id: 23, name: new URL("@/assets/test/1.jpg", import.meta.url).href }
      ]
    }
  ];

  setIcon(treeSetting.treeData);
});
</script>
<style lang="scss" scoped>
.smart-entry {
  display: flex;
  height: 100%;
  .left {
    position: relative;
    // width: 230px;
    min-width: 186px;
    max-width: 230px;
    height: 100%;
    padding-right: 6px;
    border: 1px solid #cccccc;
    border-right: 4px solid #f5f5f5;
    border-radius: 4px;
    transition: all 0.3s;
    .tree {
      width: 100%;
      height: 100%;
      padding-bottom: 6px;
      transition: all 0.3s;
    }
    .handle {
      position: absolute;
      top: 1px;

      //   transform: translateY(-50%);
      right: 0;
      padding: 4px;
      cursor: pointer;
      background-color: var(--el-bg-color);
      transition: all 0.3s;
      .icon-dakaicebianlan {
        font-size: 20px;
      }
    }
    .hideHandle {
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .middle {
    flex: 1;
    height: 100%;
    padding: 0 6px;
    .container {
      border: 1px solid #cccccc;
      border-radius: 4px;
    }
  }
  .right {
    flex: 1;
    height: 100%;
    padding-bottom: 6px;
    padding-left: 6px;
    overflow-y: scroll;
    border: 1px solid #cccccc;
    border-left: 4px solid #f5f5f5;
    border-radius: 4px;
    .el-divider--horizontal {
      width: 86%;
      margin: 24px auto;
      :deep(.el-divider__text) {
        font-size: 16px;
      }
    }
    .form-content {
      margin-top: 30px;
      .line {
        display: flex;
        justify-content: space-between;
        .el-form-item {
          width: 49%;
          :deep(.el-form-item__label) {
            font-size: 13px;
          }
          .el-input,
          .el-textarea {
            font-size: 13px;
          }
        }
      }
    }
    .btns {
      .el-button {
        font-size: 13px;
      }
      .top {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .el-button,
        .jump {
          width: 23%;
          margin-left: 0;
        }
      }
      .btm {
        margin-top: 20px;
        text-align: center;
        .el-button {
          width: 98%;
        }
      }
    }
  }
}
</style>
